<script>
import useRequestForm from "@/hooks/request-form";
import {useStore} from "vuex";

export default {
  name: "RequestModal",
  emits: ['created'],
  setup(_, {emit}){

    const store = useStore();

    const submit = async values => {
      debugger;
      await store.dispatch('request/create', values);
      emit('created')
    }


    return{ ...useRequestForm(submit)}
  }
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div :class="['form-control', {invalid: fioError}]">
      <label for="FIO">ФИО</label>
      <input type="text" id="FIO" v-model="FIO" @blur="fioBlur">
      <small v-if="fioError">{{ fioError }}</small>
    </div>

    <div :class="['form-control', {invalid: pError}]">
      <label for="phone">Телефон</label>
      <input type="text" id="phone" v-model="phone" @blur="pBlur">
      <small v-if="pError">{{ pError }}</small>
    </div>

    <div :class="['form-control', {invalid: aError}]">
      <label for="amount">Сумма</label>
      <input type="number" id="amount" v-model.number="amount" @blur="aBlur">
      <small v-if="aError">{{ aError }}</small>
    </div>

    <div class="form-control">
      <label for="status">Статус</label>
      <select id="status" v-model="status">
        <option value="done">Завершен</option>
        <option value="cancelled">Отменен</option>
        <option value="active">Активен</option>
        <option value="pending">Выполняется</option>
      </select>
    </div>

    <button class="btn primary" :disabled="isSubmitting">Создать</button>
  </form>

</template>

<style scoped>

</style>